<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
    <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <title>Document</title>
</head>
<body>
<div id="map"></div>
<script>
    var beijing = ol.proj.fromLonLat([116.28, 39.54]);
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: beijing,
            zoom: 4
        })
    });

    //实例化矢量点要素，通过矢量图层添加到地图容器中
    //这样就实现了预先加载图文标注
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(beijing),
        name: '北京市',                         //名称属性
        population: 2115                       //人口数（万）
    });
    //设置点要素样式
    iconFeature.setStyle(createLabelStyle(iconFeature));
    //矢量标注的数据源
    var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });
    //矢量标注图层
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        visible: false
    });
    map.addLayer(vectorLayer);

    //矢量标注样式设置函数，设置image为图标ol.style.Icon
    function createLabelStyle(feature){
        console.log(feature);
        return new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 60],              //锚点
                anchorOrigin:'top-right',       //锚点源
                anchorXUnits: 'fraction',       //锚点X值单位
                anchorYUnits: 'pixels',         //锚点Y值单位
                offsetOrigin: 'top-right',      //偏移原点
                opacity: 0.75,
                scale: 0.05,
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg'  //图标的URL
            }),
        });
    }
    var flag=true
    var animation=setInterval(() => {
        flag=!flag
        vectorLayer.setVisible(flag)
    }, 300);
    // setTimeout(() => {
    //   clearInterval(animation)
    //   vectorLayer.setVisible(true)
    // }, 1500);
</script>
</body>
</html>